<!doctype html>
[#escape x as (x)!?html]
<html lang="[=lang!.lang]">
<head>
    <title>[=title!'无标题']</title>
    [#include "/layout/head.html"]
</head>
<body class="bg-white/95 dark:bg-neutral-800/95 transition-all duration-600 ease-in-out">
[#include "/layout/header.html"]
<!-- 主要内容 -->
<main class="container mx-auto px-4 md:px-6 pt-24 md:pt-28 pb-16 dark:bg-neutral-700/95">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <!-- 页面标题 -->
        <section class="mb-12 text-center animate-on-scroll">
            <h1 class="font-bold text-neutral-800 dark:text-white mb-4">文章标签</h1>
            <p class="text-neutral-600 dark:text-neutral-400 max-w-2xl mx-auto">
                浏览我们精心整理的文章标签，找到您感兴趣的技术主题和内容。</p>
        </section>

        <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
            <!-- 主要内容区 -->
            <div class="lg:col-span-3">
                <!-- 分类列表 -->
                <section class="mb-16 animate-on-scroll">
                    <div class="bg-white dark:bg-neutral-700 rounded-xl shadow-lg overflow-hidden">
                        [#list tagsAll![]]
                        <!-- 分类标签 -->
                        <div class="flex overflow-x-auto space-x-1 py-3 px-4 border-b border-neutral-200 dark:border-neutral-600">
                            <a href="/tags" class="category-tab bg-primary text-white px-4 py-2 rounded-full text-sm font-medium whitespace-nowrap">
                                全部标签
                            </a>
                            [#items as item]
                            <a href="/tags/[=item.slug!'']" class="category-tab bg-neutral-100 dark:bg-neutral-600 text-neutral-800 dark:text-neutral-300 px-4 py-2 rounded-full text-sm font-medium whitespace-nowrap transition-colors duration-200">
                                [=item.name!'']
                            </a>
                            [/#items]
                        </div>
                        [/#list]

                        [#if postPage??]
                        <!-- 文章列表 -->
                        <div class="p-6 space-y-6">
                            [#list postPage.items![]]
                            <!-- 文章项 1 -->
                            [#items as item]
                            <article
                                    class="border-b border-neutral-100 dark:border-neutral-600 pb-6 last:border-0 last:pb-0">
                                <div class="flex flex-col md:flex-row gap-6">
                                    <div class="md:w-1/3">
                                        <a href="/articles/[=item.id!'']">
                                            <img src="[=item.postImage!'']" alt="[=item.postTitle!'']"
                                                 class="w-full h-48 object-cover rounded-lg hover:opacity-90 transition-opacity duration-200">
                                        </a>
                                    </div>
                                    <div class="md:w-2/3">
                                        <div class="flex items-center space-x-2 text-sm text-neutral-500 dark:text-neutral-400 mb-3">
                                            <span class=" px-3 py-1 rounded-full text-xs">
                                                [#if item.category??][=item.category.name!' '][/#if]
                                            </span>
                                            <span><i class="fa-solid fa-calendar-alt mr-1"></i>[=item.postModified!'']</span>
                                            <span><i class="fa-solid fa-user mr-1"></i>[=item.postAuthorName!'']</span>
                                            <span><i class="fa-solid fa-eye mr-1"></i>[=item.postViews!0]</span>
                                        </div>
                                        <h3 class="text-xl font-bold mb-3 text-neutral-800 dark:text-white hover:text-primary dark:hover:text-primary transition-colors duration-200">
                                            <a href="/articles/[=item.id!'']">[=item.postTitle!'']</a>
                                        </h3>
                                        <p class="text-neutral-600 dark:text-neutral-300 mb-4">
                                            [=item.postExcerpt!'']
                                        </p>
                                        <div class="flex justify-between items-center">
                                            [#list item.tags![]]
                                            <div class="flex space-x-2">
                                                [#items as tag]
                                                <a href="/tags/[=tag.slug!'']"
                                                   class="text-xs text-neutral-500 dark:text-neutral-400 bg-neutral-100 dark:bg-neutral-600 px-3 py-1 rounded-full transition-colors duration-200">[=tag.name!'']</a>
                                                [/#items]
                                            </div>
                                            [/#list]
                                            <a href="/articles/[=item.id!'']"
                                               class="font-medium flex items-center">
                                                阅读更多 <i class="fa-solid fa-angle-right ml-1"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </article>
                            [/#items]

                            [/#list]
                        </div>

                        <!-- 分页 -->
                        <div class="px-6 py-4 border-t border-neutral-200 dark:border-neutral-600">
                            <div class="flex justify-between items-center">
                                <div class="text-sm text-neutral-500 dark:text-neutral-400">
                                    共[=postPage.total!0]篇文章
                                </div>
                                <div class="flex space-x-1">
                                    [#if postPage.hasPrevious?? && postPage.hasPrevious]
                                    <a href="/categories/[=slug!'']?pageNum=[=postPage.previousPageNum!0]&pageSize=[=postPage.pageSize!0]" class="w-10 h-10 rounded-lg flex items-center justify-center bg-neutral-100 dark:bg-neutral-600 text-neutral-700 dark:text-neutral-300 transition-colors duration-200">
                                        <i class="fa-solid fa-angle-left"></i>
                                    </a>
                                    [#else]
                                    <a class="w-10 h-10 rounded-lg flex items-center justify-center bg-neutral-100 dark:bg-neutral-600 text-neutral-700 dark:text-neutral-300 transition-colors duration-200">
                                        #
                                    </a>
                                    [/#if]
                                    <a href="/categories/[=slug!'']?pageNum=[=postPage.pageNum!0]&pageSize=[=postPage.pageSize!0]" class="w-10 h-10 rounded-lg flex items-center justify-center bg-neutral-100 dark:bg-neutral-600 text-neutral-700 dark:text-neutral-300 transition-colors duration-200">
                                        [=postPage.pageNum!0]
                                    </a>
                                    [#if postPage.hasNext?? && postPage.hasNext]
                                    <a href="/categories/[=slug!'']?pageNum=[=postPage.nextPageNum!0]&pageSize=[=postPage.pageSize!0]" class="w-10 h-10 rounded-lg flex items-center justify-center bg-neutral-100 dark:bg-neutral-600 text-neutral-700 dark:text-neutral-300 transition-colors duration-200">
                                        <i class="fa-solid fa-angle-right"></i>
                                    </a>
                                    [#else]
                                    <a  class="w-10 h-10 rounded-lg flex items-center justify-center bg-neutral-100 dark:bg-neutral-600 text-neutral-700 dark:text-neutral-300 transition-colors duration-200">
                                        #
                                    </a>
                                    [/#if]
                                </div>
                            </div>
                        </div>
                        [/#if]
                    </div>
                </section>
            </div>

            [#include "/layout/aside.html"]
        </div>
    </div>
</main>
[#include "/layout/footer.html"]
</body>
</html>
[/#escape]